<template>
	<su-popup :show="show" round="10" @close="onCancel">
		<view class="ss-modal-box bg-white ss-flex-col">
			<!-- Header -->
			<view class="modal-header ss-flex ss-col-center">
				<view class="header-title">选择推送平台</view>
			</view>
			<!-- Content: 列表展示推送平台 -->
			<view class="modal-content ss-flex-1">
				<scroll-view
						scroll-y="true"
						class="modal-content-scroll"
						@touchmove.stop
				>
					<view
							class="platform-item ss-m-b-20"
							v-for="platform in pushPlatformList"
							:key="platform.id"
					>
						<button
								class="ss-reset-button spec-btn"
								:class="{
                'ui-BG-Main-Gradient': state.selectedPlatform && state.selectedPlatform.id === platform.id
              }"
								@tap="onSelectPlatform(platform)"
						>
							{{ platform.name }}
						</button>
					</view>
				</scroll-view>
			</view>
			<!-- Footer: 确认按钮 -->
			<view class="modal-footer border-top">
				<view class="buy-box ss-flex ss-col-center ss-row-center">
					<button
							class="ss-reset-button confirm-btn ui-Shadow-Main"
							@tap="onConfirm"
					>
						确认
					</button>
				</view>
			</view>
		</view>
	</su-popup>
</template>

<script setup>
import { reactive } from 'vue'
const emits = defineEmits(['confirm', 'cancel'])
const props = defineProps({
	show: {
		type: Boolean,
		default: false
	},
	// 可传入推送平台数据，否则使用默认假数据
	pushPlatformList: {
		type: Array,
		default: () => [
			{ id: 1, name: '微信', code: 'wechat' },
			{ id: 2, name: 'QQ', code: 'qq' },
			{ id: 3, name: '邮箱', code: 'email' }
		]
	}
})
const state = reactive({
	selectedPlatform: null
})

function onSelectPlatform(platform) {
	state.selectedPlatform = platform
}

function onConfirm() {
	if (state.selectedPlatform) {
		emits('confirm', state.selectedPlatform)
	} else {
		uni.showToast({ title: '请选择推送平台', icon: 'none' })
	}
}

function onCancel() {
	emits('cancel')
}
</script>

<style lang="scss" scoped>
.ss-modal-box {
	border-radius: 30rpx 30rpx 0 0;
	max-height: 1000rpx;
}

.modal-header {
	padding: 60rpx 20rpx 30rpx;
	.header-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
}

.modal-content {
	padding: 0 20rpx;
	.modal-content-scroll {
		max-height: 500rpx;
	}
}

.platform-item {
	.spec-btn {
		height: 60rpx;
		min-width: 120rpx;
		padding: 0 30rpx;
		background: #f4f4f4;
		border-radius: 30rpx;
		color: #434343;
		font-size: 28rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}
}

.modal-footer {
	padding: 20rpx;
	.buy-box {
		width: 100%;
		button.confirm-btn {
			width: 100%;
			height: 80rpx;
			border-radius: 40rpx;
			background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
			color: #fff;
			font-size: 30rpx;
			font-weight: bold;
		}
	}
}
</style>
